import React, { Component } from "react";
import { Table, Button } from "antd";
import {
  DeleteOutlined,
  PlusCircleOutlined,
} from "@ant-design/icons";

export default class SwiperList extends Component {
  constructor(props) {
    super();
    this.state = {
      isshow: false,
      newLanmu: {

      },
      updateLanmu: {

      },
      visible: false,
      visible1: false,
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '缩略图',
          dataIndex: 'img',
          key: 'img',
          render: img => <img style={{ width: "100px" }} src={img} alt="" />
        },
        {
          title: '链接',
          dataIndex: 'sort',
          key: 'sort',
        },
        {
          title: '描述',
          dataIndex: 'describe',
          key: 'describe',
        },

        {
          title: '显示状态',
          dataIndex: 'state',
          key: 'state',
        },
        {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <>
              <Button type="primary">停用</Button>
              <Button type="primary">编辑</Button>
              <Button type="primary">删除</Button>
            </>
          )
        }
      ],
      data: [
        {
          id: '1',
          img: 'https://www.17sucai.com/preview/806169/2020-03-04/%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/images/logo.png',
          sort: 'http://www.baidu.com',
          describe: '世界以你环环相扣',
          state: '已启用'
        }
      ]
    };
  }
  render() {
    return (
      <div className="swiperList">
        <div className="btnBox">
          <div className="btnBoxSelect">
            <Button
              className="deleteBtn"
              type="default"
              icon={<DeleteOutlined />}
            >
              批量删除
            </Button>
            <Button
              className="addBtn"
              type="default"
              icon={<PlusCircleOutlined />}
            >
              添加
            </Button>
          </div>
          <div className="numTotal">
            <span>共有数据：</span>
            <span className="numTotal-num">66</span>
            <span>条</span>
          </div>
        </div>
        <div className="tableCon">
          <Table
            rowSelection={{
              type: "checkbox",
              onChange: (selectedRowKeys, selectedRows) => {
                console.log(
                  `selectedRowKeys: ${selectedRowKeys}`,
                  "selectedRows: ",
                  selectedRows
                );
              }
            }}
            columns={this.state.columns}
            dataSource={this.state.data}
          />
        </div>
      </div>
    );
  }
}
